<template>
  <view class="container">
    <view
      class="indexbg"
      :style="{
        backgroundImage: 'url(' + $util.img('image/index_bg.png') + ')',
      }"
      mode="widthFix"
      lazy-load
    ></view>
    <!-- 顶部导航 -->
    <view class="fixHeader flex-y-center" :style="{ paddingTop: StatusBar + 'px' }">
      <view class="info">
        <view class="">
          <view class="font-30 font-weight-8" style="color: #172140">个人中心</view>
          <view class="font-20 font-weight-5" style="color: #788096">查看修改个人资料</view>
        </view>
      </view>
    </view>

    <view class="flex-between myinfo m-30" v-if="!token">
      <view class="flex" @click="openLogin()">
        <image :src="$util.img('/image/avatar.png')" class="headimg" mode=""></image>
        <view class="m-l-20">
          <view class="font-36 font-weight-8">请登录</view>
          <view class="mytell">****</view>
        </view>
      </view>
    </view>
    <view class="flex-between myinfo m-30" v-else>
      <view class="flex">
        <image
          :src="userInfo.headimg ? $util.img(userInfo.headimg) : $util.img('image/avatar.png')"
          class="headimg"
          mode=""
          lazy-load
        ></image>
        <view class="m-l-20">
          <view class="font-36 font-weight-8">{{ userInfo.nickname ? userInfo.nickname : "微信用户" }}</view>
          <view class="mytell">{{ userInfo.mobile | filterMobile }}</view>
        </view>
      </view>
      <view class="editinfo" @click="$util.redirectTo('/pages/info/info')">
        <view>修改资料</view>
        <u-icon name="arrow-right" size="10" color="#AFB0B2"></u-icon>
      </view>
    </view>

    <view class="flex-between m-30">
      <view class="myxfitem" style="width: 210rpx">
        <view class="flex-between" @click="openCard()">
          <image :src="$util.img('/image/erqi/erweima.png')" class="xficon" mode=""></image>
          <view class="rightbox">
            <u-icon name="arrow-right" size="10" color="#AFB0B2"></u-icon>
          </view>
        </view>
        <view class="font-26 flex-y-center" style="color: #5d657f" @click="openDesc('vip')">
          会员卡<text class="iconfont font-22 m-l-10" style="color: #a4a9b7">&#xe72d;</text>
        </view>
        <view class="color-title2" @click="openCard()"> 查看会员码 </view>
      </view>
      <view class="myxfitem" style="width: 232rpx">
        <view class="flex-between" @click="changeEyes()">
          <image :src="$util.img('/image/sanqi/yue.png')" class="xficon" mode=""></image>
          <view class="rightbox" style="background-color: #fff">
            <image
              :src="$util.img('/image/eye1.png')"
              class="eyeicon"
              mode=""
              v-if="!eyeIcon"
              @click.stop="changeEyes()"
            ></image>
            <image
              :src="$util.img('/image/eye2.png')"
              class="eyeicon"
              mode=""
              v-else
              @click.stop="changeEyes()"
            ></image>
          </view>
        </view>
        <view class="font-26 flex-y-center" style="color: #5d657f" @click="openDesc('balance')">
          账户余额<text class="iconfont font-22 m-l-10" style="color: #a4a9b7">&#xe72d;</text>
        </view>
        <view class="flex-between rel">
          <view class="" v-if="eyeIcon">
            <text class="color-title2 font-20 font-weight-5">￥</text>
            <text class="color-title2 font-30 font-weight-6">{{ userInfo.balance }}</text>
          </view>
          <view class="" v-else>
            <text class="font-32 font-weight-5">***</text>
          </view>
          <view
            class="rechargeAb"
            @click="goTo('/pages/recharge/recharge')"
            v-if="memberrechargeConfig && memberrechargeConfig.is_use"
            >充值</view
          >
        </view>
      </view>
      <view class="myxfitem" style="width: 210rpx" @click="goTo('/pages/myPoint/myPoint')">
        <view class="flex-between">
          <image :src="$util.img('/image/huaImg/14.png')" class="xficon" mode=""></image>
          <view class="rightbox">
            <u-icon name="arrow-right" size="10" color="#AFB0B2"></u-icon>
          </view>
        </view>
        <view class="font-26" style="color: #5d657f">我的积分</view>
        <view class="">
          <text class="color-title2 font-30 font-weight-8">{{ userInfo.point }}</text>
        </view>
      </view>
    </view>

    <view class="m-30 p-24 bgwhite">
      <view class="flex-between m-b-24">
        <view class="font-30 font-weight-8">我的订单</view>
        <!-- <view class="flex" @click="goTo('/pages/mallOrder/mallOrder')">
				<view class="font-24">全部订单</view>
				<u-icon name="arrow-right" size="10" color="#AFB0B2"></u-icon>
			</view> -->
      </view>
      <view class="orderall">
        <view class="orderit" @click="goTo('/otherpages/yuOrder/yuOrderList')">
          <image :src="$util.img('/image/huaImg/15.png')" class="ordericon" mode=""></image>
          <view>预约订单</view>
        </view>
        <view class="orderit" @click="goTo('/pages/mallOrder/mallOrder')">
          <image :src="$util.img('/image/huaImg/16.png')" class="ordericon" mode=""></image>
          <view>商城订单</view>
        </view>
        <view class="orderit" @click="goTo('/pages/foodOrder/foodOrder')">
          <image :src="$util.img('/image/huaImg/17.png')" class="ordericon" mode=""></image>
          <view>餐饮/零售订单</view>
        </view>
      </view>
    </view>

    <view class="m-30 p-24 bgwhite">
      <view class="font-30 font-weight-8">其他功能</view>
      <view class="flex funlist">
        <block v-for="(item, index) in navlist" :key="index">
          <view class="funitem" v-if="item.name !== '联系客服'" @click="goTo(item.url)">
            <image :src="$util.img(item.img)" class="funicon" mode=""></image>
            <view class="font-26">{{ item.name }}</view>
          </view>
          <button open-type="contact" class="funitem" v-else>
            <image :src="$util.img('/image/huaImg/22.png')" class="funicon" mode=""></image>
            <view class="font-26">联系客服</view>
          </button>
        </block>
      </view>
    </view>

    <!-- 登录 -->
    <login-pop ref="loginDialog"></login-pop>
    <tabbar value="3" ref="diyTabbar"></tabbar>

    <!-- 会员卡码 -->
    <vip-card :show="showCard" @close="closeCard" ref="vipCardPop" v-if="showCard" :mobile="userInfo.mobile"></vip-card>
    <!-- 余额明细说明 -->
    <!-- 接口  未对接  /api/member/balanceexplain -->
    <balance-desc :show="showDesc" @close="closeDesc" :type="balanceType" v-if="showDesc"></balance-desc>
  </view>
</template>

<script>
import balanceDesc from "../../components/balanceDesc/balanceDesc.vue";
import vipCard from "../../components/vipCard/vipCard.vue";
import tabbar from "../../components/tabbar/tabbar.vue";
export default {
  components: {
    tabbar,
    vipCard,
    balanceDesc,
  },
  data() {
    return {
      StatusBar: getApp().globalData.StatusBar,
      navlist: [
        {
          name: "购物卡",
          img: "/image/huaImg/28.png",
          url: "/otherpages/shoppingCard/shoppingCard",
          show: true,
        },
        {
          name: "地址管理",
          img: "/image/huaImg/18.png",
          url: "/pages/address/address",
          show: true,
        },
        {
          name: "我的收藏",
          img: "/image/huaImg/19.png",
          url: "/pages/collection/collection",
          show: true,
        },
        {
          name: "分享海报",
          img: "/image/huaImg/19.png",
          url: "/pages/poster/poster",
          show: true,
        },
        {
          name: "健康档案",
          img: "/image/huaImg/26.png",
          show: true,
          url: "/otherpages/health/historyFile",
        },
        {
          name: "设备管理",
          img: "/image/huaImg/27.png",
          show: true,
          url: "/otherpages/health/equipment",
        },
        {
          name: "优惠券",
          img: "/image/sanqi/coupon.png",
          url: "/pages/couponList/couponList",
          show: true,
        },
        {
          name: "领券中心",
          img: "/image/sanqi/receive.png",
          url: "/pages/couponCenter/couponCenter",
          show: true,
        },
        {
          name: "关于我们",
          img: "/image/huaImg/20.png",
          url: "/pages/aboutUs/aboutUs",
          show: true,
        },
        {
          name: "投诉建议",
          img: "/image/huaImg/21.png",
          show: true,
          url: "/pages/feedBack/feedBack",
        },
        {
          name: "联系客服",
          img: "/image/huaImg/22.png",
          url: "",
          show: false,
        },
        {
          name: "设置",
          img: "/image/huaImg/25.png",
          url: "/pages/setting/setting",
          show: true,
        },
      ],
      //用户信息
      token: "",
      userInfo: {
        balance: 0,
        point: 0,
      },
      eyeIcon: false, //默认隐藏余额眼睛图标
      showCard: false,
      showDesc: false,
      memberrechargeConfig: null,
      balanceType: "balance",
      eyeTimer: null,
    };
  },
  computed: {
    storeToken() {
      return this.$store.state.token;
    },
  },
  watch: {
    storeToken: async function (nVal, oVal) {
      await this.getMemberInfo();
    },
  },
  filters: {
    filterMobile(value) {
      return value.substr(0, 3) + "****" + value.substr(7, 4);
    },
  },
  onLoad() {
    uni.hideTabBar();
    if (!uni.getStorageSync("token")) this.$refs.loginDialog.open();
  },
  async onShow() {
    this.$refs.diyTabbar.init();
    this.token = uni.getStorageSync("token");
    if (this.token) {
      await this.getMemberInfo();
    }
    this.getMemberrechargeConfig();
  },
  onUnload() {
    if (this.eyeTimer) {
      clearTimeout(this.eyeTimer);
      this.eyeTimer = null;
    }
  },
  methods: {
    /**
     * 获取充值提现配置
     */
    getMemberrechargeConfig() {
      this.$api.sendRequest({
        url: "/memberrecharge/api/memberrecharge/config",
        success: (res) => {
          if (res.code >= 0 && res.data) {
            this.memberrechargeConfig = res.data;
          }
        },
      });
    },
    openDesc(type) {
      this.balanceType = type;
      this.showDesc = true;
    },
    closeDesc() {
      this.showDesc = false;
    },
    openCard() {
      if (!this.token) {
        this.openLogin();
      } else {
        this.showCard = true;
        if (this.eyeIcon) this.eyeIcon = false;
        this.$refs.vipCardPop.generateQRCode();
      }
    },
    closeCard() {
      this.showCard = false;
    },
    changeEyes() {
      // 先清除已存在的定时器，避免多个定时器同时运行
      if (this.eyeTimer) {
        clearTimeout(this.eyeTimer);
        this.eyeTimer = null;
      }

      this.eyeIcon = !this.eyeIcon;
      if (this.eyeIcon && this.token) {
        this.updateBalance();
        // 设置一分钟后自动关闭眼睛图标的定时器
        this.eyeTimer = setTimeout(() => {
          if (this.eyeIcon) {
            // 再次检查，确保当前是打开状态
            this.eyeIcon = false;
            console.log("眼睛图标已自动关闭");
          }
          this.eyeTimer = null; // 清除定时器引用
        }, 60000); // 60000毫秒 = 1分钟
      }
    },
    goTo(url) {
      if (!this.token) {
        this.openLogin();
      } else {
        this.$util.redirectTo(url);
      }
    },
    openLogin() {
      this.$refs.loginDialog.open();
      this.$refs.loginDialog.getOpenId();
    },
    updateBalance() {
      this.$api.sendRequest({
        url: "/api/member/syncYinBaoBalance",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            console.log("已同步");
            this.getMemberInfo();
          }
        },
      });
    },

    // 获取会员基础信息
    async getMemberInfo() {
      let res = await this.$api.sendRequest({
        url: "/api/member/info",
        method: "GET",
        async: false,
        data: {},
      });
      if (res.code >= 0 && res.data) {
        this.token = uni.getStorageSync("token");
        this.userInfo = res.data;
        uni.setStorageSync("userInfo", this.userInfo);

        if (this.userInfo.nickname == "微信用户" || !this.userInfo.nickname) {
          uni.showModal({
            title: "提示",
            content: "请先去完善个人信息",
            confirmText: "立即完善",
            success: (res) => {
              if (res.confirm) {
                this.$util.redirectTo("/pages/info/info");
              }
            },
          });
        }
      } else {
        this.token = "";
        uni.removeStorageSync("token");
        uni.removeStorageSync("userInfo");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.indexbg {
  position: absolute;
  top: 0;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 710rpx;
}
.container {
  // width: 750rpx;
  // min-height: 100vh;
  // background-color: #fff;
}
.fixHeader {
  position: relative;
  // top:0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  padding-left: 30rpx;
  .info {
    display: flex;
    align-items: center;
    image {
      width: 72rpx;
      height: 72rpx;
      margin-right: 12rpx;
    }
  }
}
.myinfo {
  position: relative;
  z-index: 5;
  .headimg {
    width: 106rpx;
    height: 106rpx;
    border-radius: 50%;
    margin-right: 16rpx;
  }
  .mytell {
    font-size: 26rpx;
    color: #788096;
    margin-top: 8rpx;
    text-decoration-line: underline;
  }
  .editinfo {
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    view {
      font-size: 24rpx;
    }
  }
}
.myxfitem {
  position: relative;
  z-index: 5;
  width: 32%;
  height: 232rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // align-items: center;
  .xficon {
    width: 40rpx;
    height: 40rpx;
  }
  .rightbox {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    background-color: #f6f6f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.orderall {
  display: flex;
  justify-content: space-around;
  .orderit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .ordericon {
      width: 70rpx;
      height: 70rpx;
      margin-bottom: 10rpx;
    }
  }
}
.bgwhite {
  background-color: #fff;
  position: relative;
  z-index: 5;
  border-radius: 20rpx;
}
.funlist {
  flex-wrap: wrap;
  .funitem {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 24rpx;
    .funicon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 6rpx;
    }
  }
}
button {
  padding: 0;
  margin: 0;
  background-color: transparent;
}
.eyeicon {
  width: 37rpx;
  height: 37rpx;
}
.rechargeAb {
  border-radius: 20rpx 0 0 20rpx;
  background: $color-title2;
  color: #fff;
  padding: 3rpx 14rpx;
  position: absolute;
  right: -30rpx;
  font-size: 24rpx;
}
</style>
